<template>
    <el-dialog title="修改菜单" width="580px" class="icon-dialog" :visible.sync="show" @open="open" :before-close="closeForm" append-to-body>
        <el-form  :size="size" ref="form" :model="form" :rules="rules" label-width="90px">
            <el-row>
                <el-form-item label="所属父类" prop="pid">
                    <treeselect :default-expand-level="1" v-model="form.pid" :options="list" :normalizer="normalizer" :show-count="true" placeholder="选择上级菜单"/>
                </el-form-item>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="分组名称" prop="title">
                        <el-input v-model="form.title" clearable placeholder="菜单名称"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="控制器名称" prop="controller_name">
                        <el-input v-model="form.controller_name" @input="setComponent" clearable  placeholder="同控制器生成地址"  />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="生成代码" prop="create_code">
                        <el-radio-group v-model="form.create_code">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
				<el-col :span="24">
					<el-form-item label="选择链接库" prop="connect">
						<el-select style="width:100%" v-model="form.connect" @change="selectdb" filterable placeholder="请选择数据表">
							<el-option v-for="item in connects" :key="item" :label="item" :value="item"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row v-if="dbtype !== 'mongo'">
				<el-col :span="24">
					<el-form-item label="创建数据表" prop="create_table">
						<el-radio v-model="form.create_table" :label="1" checked>是</el-radio>
						<el-radio v-model="form.create_table" :label="0">否</el-radio>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="数据表名" prop="table_name">
						<el-input v-model="form.table_name" clearable placeholder="生成或者关联的数据表"  />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="主键ID" prop="pk">
						<el-input v-model="form.pk" :disabled="disabledPk" clearable placeholder="数据表主键"/>
					</el-form-item>
				</el-col>
			</el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button :size="size" :loading="loading" type="primary" @click="submit" >
                <span v-if="!loading">确 定</span>
                <span v-else>提 交 中...</span>
            </el-button>
            <el-button :size="size" @click="closeForm">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
export default {
    components: { Treeselect},
    props: {
        show: {
            type: Boolean,
            default: false
        },
        size: {
            type: String,
            default: 'small'
        },
        info:{
            type:Object,
        },
        list:{
            type:Array,
        },
        connects:{
            type:Array,
        },
    },
    data() {
        return {
            form: {
                status:'',
				create_table:'',
				is_post:'',
				create_code:'',
				connect:'',
				app_id:'',
				page_type:'',
				table_name:'',
				pid:'',
				pk:'',
            },
			dbtype:'',
			disabledPk:false,
            loading:false,
            rules: {
                title: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
            },
        }
    },
    methods: {
        submit(){
            this.$refs['form'].validate(valid => {
                if (valid) {
                    this.loading = true
                    this.$axios.post('/admin/Sys/Base/updateMenu',this.form).then(res => {
                        if(res.data.status == '200'){
                            this.$message({message: '操作成功', type: 'success'})
                            this.$emit('refesh_list')
                            this.closeForm()
                        }else{
                            this.loading = false
							this.$message.error(res.data.msg)
                        }
                    }).catch(()=>{
                        this.loading = false
                    })
                }
            })
        },
        open(){
            if(this.info.pid == '0' ){
                this.$delete(this.info,'pid')
            }
            this.form = this.info
			this.$axios.post('/admin/Sys/Base/getDbType',{dbname:this.form.connect}).then(res => {
				if(res.data.status == 200){
					this.dbtype = res.data.data
					if(res.data.data == 'mongo'){
						this.disabledPk = true
					}
				}
			})
        },
        /** 转换菜单数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.menu_id,
                label: node.title,
                children: node.children
            };
        },
		setComponent(val){
			this.$axios.post('/admin/Sys/Base/getAppInfo',{'controller_name':val}).then(res => {
				if(res.data.status == 200){
					this.form.table_name = res.data.table_name.toLowerCase()
					this.form.pk = res.data.pk.toLowerCase()
				}
			})
		},
		selectdb(val){
			this.$axios.post('/admin/Sys/Base/getDbType',{dbname:val}).then(res => {
				if(res.data.status == 200){
					this.dbtype = res.data.data
					if(this.dbtype == 'mongo'){
						this.form.pk = '_id'
						this.disabledPk = true
					}else{
						this.disabledPk = false
					}
				}
			})
		},
        closeForm(){
            this.$emit('update:show', false)
            this.loading = false
            if (this.$refs['form']!==undefined) {
                this.$refs['form'].resetFields()
            }
        }
    },
}
</script>